<template>
	<view class="user">
<!-- 		<view class="headers">
			<text>商家首页</text>
		</view> -->
		<!--头部-->
		<view class="user-section">
			<!--用户信息-->
			<view class="user-info-box">
				<view
					class="portrait-box"
					@tap="navTo(userInfo ? '/pages/user/shop/shopEdit' : 'login')"
				>
					<view class="logo">
						<image src="/static/shop/icon4.png"></image>
						<text>{{userInfo.id}}</text>
					</view>
					<image
						class="portrait"
						:src="userInfo.avatarPicture || '/static/shop/icon1.png'"
					></image>
					<view>
						<text class="username">
							{{
								userInfo.storeName ||
								userInfo.realname ||
								''
							}}
						</text>
						<view class="star">
							<image v-for="(item, index) in 5" :key="index" :src="star>index ? '/static/shop/icon3.png' : '/static/shop/icon2.png'"></image>
						</view>
					</view>
				</view>
				<view>
					<view class="flexr">
						<text class="iconfont iconsaomiao" style="font-size:50rpx; margin-right:50rpx; color:#fff;" @tap="toScan"></text>
						<text class="iconfont iconico" style="font-size:50rpx; color:#fff;" @tap="showCode"></text>
					</view>
					<view class="flexr money">
						<image src="/static/shop/icon5.png"></image>
						<text>保证金已交</text>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="nums">
			<view class="num-li">
				<image src="/static/shop/01.png"></image>
				<text>合同金额</text>
				<text class="num">{{shop.allmoney || 0}}</text>
			</view>
			<view class="num-li">
				<image src="/static/shop/02.png"></image>
				<text>待收租金</text>
				<text class="num">{{shop.ra0 || 0}}</text>
			</view>
			<view class="num-li">
				<image src="/static/shop/03.png"></image>
				<text>已收金额</text>
				<text class="num">{{shop.ra1 || 0}}</text>
			</view>
			<view class="num-li">
				<image src="/static/shop/04.png"></image>
				<text>进货金额</text>
				<text class="num">{{shop.oprice || 0}}</text>
			</view>
			<view class="num-li">
				<image src="/static/shop/05.png"></image>
				<text>逾期租金</text>
				<text class="num">{{shop.s || 0}}</text>
			</view>
			<view class="num-li">
				<image src="/static/shop/06.png"></image>
				<text>逾期率</text>
				<text class="num">{{shop.r || 0}}</text>
			</view>
		</view> -->

		<view class="sizes">
			<view class="size-tit">
				<text>快速处理</text>
			</view>
			<view class="size-ul">
				<!-- <view class="size-li" @tap="navTo('/pages/user/shop/list?state=1')">
					<text class="num">{{shop.o3 || 0}}</text>
					<text>待审核订单</text>
					<view class="bot">
						<text>立即审核</text>
						<image src="/static/shop/icon6.png"></image>
					</view>
				</view>
				<view class="size-li" @tap="navTo('/pages/user/shop/list?state=2')">
					<text class="num">{{shop.o5 || 0}}</text>
					<text>待打款订单</text>
					<view class="bot">
						<text>立即打款</text>
						<image src="/static/shop/icon6.png"></image>
					</view>
				</view> -->
				<view class="size-li" @tap="navTo('/pages/user/shop/order?state=1')">
					<text class="num">{{shop.o4 || 0}}</text>
					<text>申请打款订单</text>
					<view class="bot">
						<text>立即申请</text>
						<image src="/static/shop/icon6.png"></image>
					</view>
				</view>
				<view class="size-li" @tap="navTo('/pages/user/shop/order?state=2')">
					<text class="num">{{shop.o5 || 0}}</text>
					<text>待复核订单</text>
					<view class="bot">
						<text>立即查看</text>
						<image src="/static/shop/icon6.png"></image>
					</view>
				</view>
				<view class="size-li" @tap="navTo('/pages/user/shop/order?state=3')">
					<text class="num">{{shop.o6 || 0}}</text>
					<text>待收货订单</text>
					<view class="bot">
						<text>立即查看</text>
						<image src="/static/shop/icon6.png"></image>
					</view>
				</view>
				
				<view class="size-li" @tap="navTo('/pages/user/shop/order?state=4')">
					<text class="num">{{shop.o8 || 0}}</text>
					<text>已完成订单</text>
					<view class="bot">
						<text>立即查看</text>
						<image src="/static/shop/icon6.png"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="sizes">
			<view class="size-tit">
				<text>经营状况</text>
			</view>
			<view class="types">
				<text :class="type==1 ? 't1 cur' : 't1'" @tap="getType(1)">今日</text>
				<text :class="type==2 ? 'cur' : ''" @tap="getType(2)">昨日</text>
				<text :class="type==3 ? 'cur' : ''" @tap="getType(3)">近7日</text>
				<text :class="type==4 ? 't4 cur' : 't4'" @tap="getType(4)">近一月</text>
			</view>
			<view class="size-ul">
				<view class="size-li">
					<text class="num">{{typeInfo.orders || 0}}</text>
					<text>成交订单</text>
				</view>
				<view class="size-li">
					<text class="num">{{typeInfo.ototal || 0}}</text>
					<text>成交金额</text>
				</view>
				<!-- <view class="size-li">
					<text class="num">{{typeInfo.porders || 0}}</text>
					<text>放款订单</text>
				</view>-->
				<view class="size-li">
					<text class="num">{{typeInfo.pucharseMoney || 0}}</text>
					<text>可提现销售款</text>
				</view> 
			</view>
		</view>

		<view class="navs">
			<view class="nav-li" @tap="navTo('/pages/user/shop/order?state=0')">
				<image src="/static/shop/nav1.png"></image>
				<text>租赁订单</text>
			</view>
			 <view class="nav-li" @tap="navTo('/pages/user/shop/purcharepay')">
				<image src="/static/shop/nav2.png"></image>
				<text>采购对帐单</text>
			</view>
			<!--<view class="nav-li" @tap="navTo('/pages/user/shop/shopaccount')">
				<image src="/static/shop/nav3.png"></image>
				<text>余额对帐单</text>
			</view>-->
			<view class="nav-li" @tap="navTo('/pages/user/shop/purchasewith')">
				<image src="/static/shop/nav4.png"></image>
				<text>提现</text>
			</view> 
			<view class="nav-li" @tap="navTo('/pages/user/shop/member')">
				<image src="/static/shop/nav4.png"></image>
				<text>员工管理</text>
			</view>
		</view>
		
		<view class="tips-bot" style="padding: 0 0 10px 10px;">
			<text style="color:#f00;">注：</text>
			<text style="color:#999;">可提现销售款可以申请提现，平台将打到指定开户的支付宝帐号！</text>
		</view>
		
		<!-- 个人中心 内容区-->
<!-- 		<view
				class="cover-container"
				:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
				@touchstart="coverTouchstart"
				@touchmove="coverTouchmove"
				@touchend="coverTouchend"
		>

			<view class="promotion-center">
				<view class="tj-sction">
					<view class="tj-item">
						<text class="num">
							{{userInfo.total || 0}}
						</text>
						<text>累计营业额（元）</text>
					</view>
					<view class="tj-item">
						<text class="num">
							{{userInfo.orders || 0}}
						</text>
						<text>已成交（笔）</text>
					</view>
				</view>
			</view>

			<view class="promotion-center">
				<view class="order-section" v-if="userInfo.type==1">
					<view
							class="order-item"
							v-for="(item, index) in orderSectionList2" v-if="index<(num+1)"
							:key="item.title"
							@tap="navTo(item.url)"
							hover-class="common-hover"
							:hover-stay-time="50">
						<i class="iconfont" :class="item.icon"/>
						<text>{{ item.title }}</text>
						<rf-badge type="error" size="small" class="badge" :text="item.num"></rf-badge>
					</view>
				</view>
				<view class="order-section" v-else>
					<view
							class="order-item"
							v-for="(item, index) in orderSectionList" v-if="index<num"
							:key="item.title"
							@tap="navTo(item.url)"
							hover-class="common-hover"
							:hover-stay-time="50">
						<i class="iconfont" :class="item.icon"/>
						<text>{{ item.title }}</text>
						<rf-badge type="error" size="small" class="badge" :text="item.num"></rf-badge>
					</view>
				</view>
			</view>

			<view class="history-section">
				<view class="navbar">
					<view
						class="nav-item"
						:class="orderType==1 ? `text-${themeColor.name} current` : ''"
						@tap="tabClick(1)"
					>
						申请打款
					</view>
					<view v-if="userInfo.type==1"
						class="nav-item"
						:class="orderType==2 ? `text-${themeColor.name} current` : ''"
						@tap="tabClick(2)"
					>
						待复核订单
					</view>
				</view>

				<view class="h-list">
					<view class="flexs h-item" v-for="item in orderList" :key="item.id" @tap.stop="navTo(`/pages/user/shop/view?id=${item.id}`)">
						<image class="h-item-img"
						       :src="item.orderSkus[0].skuImage || '/static/errorImage.jpg'" mode="aspectFill"></image>
						<view class="info-box">
							<view class="flexs name">
								<text>{{item.orderSkus[0].skuName}}</text>
								<text>{{ item.status | orderStatusFilter }}</text>
							</view>
							<view class="flexs info">
								<text>总额：￥{{item.total || 0}}元</text>
								<text>期数：{{item.num || 1}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="no-foot-print" v-if="orderList.length === 0" @tap="navTo('/pages/product/list')">
					<i class="iconfont iconshare no-foot-print-icon"/>
					暂无数据~
				</view>
			</view>

		</view> -->
		<!--页面加载动画-->
		<rf-loading v-if="loading"></rf-loading>

		<view class="flexc column img-box" v-if="flag" @tap="flag=false;">
			<image :src="userInfo.qrcode" mode="widthFix"></image>
			<button style="margin-top:20rpx; padding:0 20rpx;" @tap.stop="toSave">保存二维码</button>
		</view>
		<!-- <uqrcode ref="uqrcode" style="height:300px; opacity:0;"></uqrcode> -->

	</view>
</template>
<script>
    /**
     * @des 个人中心
     *
     * @author stav stavyan@qq.com
     * @date 2020-01-10 11:41
     * @copyright 2019
     */
    import {footPrintList, memberInfo} from '@/api/userInfo';
    import listCell from '@/components/rf-list-cell';
    import {mapMutations} from 'vuex';
    import rfBadge from '@/components/rf-badge/rf-badge'
	//import uqrcode from "@/components/uqrcode/uqrcode.vue";
	//const QRCode = require('qrcode');
	import mConstData from '@/config/constData.config';
    let startY = 0, moveY = 0, pageAtTop = true;
    export default {
        components: {
            listCell,
            rfBadge
        },
        data() {
            return {
                settingList: this.$mConstDataConfig.settingList,
                orderSectionList: this.$mConstDataConfig.orderShopList,
                orderSectionList2: this.$mConstDataConfig.orderSectionList2,
                amountList: this.$mConstDataConfig.amountList,
                headImg: this.$mAssetsPath.headImg,
                vipCardBg: this.$mAssetsPath.vipCardBg,
                arc: this.$mAssetsPath.arc,
                userBg: this.$mAssetsPath.userBg,
                coverTransform: 'translateY(0px)',
                coverTransition: '0s',
                moving: false,
                userInfo: { // 用户信息
                    promoter: null  // 分销商信息
                },
                footPrintList: [], // 足迹列表
                loading: true,
		        hasLogin: true,
		        orderType: 1,
		        info: {},
		        orderList: [],
		        storeId: '',
		        codeUrl: '',
		        flag: false,
		        num: 5,
		        type: 1,
		        star: 5,
		        shop: {},
		        typeInfo: {}
            }
        },
		filters: {
			// 时间格式化
			time(val) {
			return val;
				//return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
			},
			// 状态显示格式化
			orderStatusFilter(orderStatus) {
				let state;
				mConstData.orderStatus.forEach(orderItem => {
					if (orderItem.key === parseInt(orderStatus, 10)) {
						state = orderItem.value;
					}
				});
				return state;
			}
		},
        // 小程序分享
        onShareAppMessage() {
            return {
                title: '欢迎来到宽盒商城',
                path: '/pages/index/index'
            }
        },
        async onShow() {
            // 初始化数据
            //this.initData();
            // this.loading = false;
            // return false
            this.$http.get(memberInfo).then(async res => {
                this.loading = false;
                let storeId = res.storeId;
                this.storeId = storeId + '';
				this.$http.get('/store/TStoreInfo/querystoreinfo?storeId='+storeId).then(r => {
					if(r.status!=2){
						
						this.$mHelper.toast('店铺未审核!');
						uni.navigateBack();
					}
					this.userInfo = r || {};
					if(r.customerId!=res.id){
						this.num = 2
					}
					this.userInfo.qrcode = res.qrcode;
				});

			    // this.$refs.uqrcode.make({
		    	// 	size: 300,
		    	// 	text: r.storeId
		    	// })
		    	// .then(res => {
		    	// 	console.log(res)
		    	// 	this.codeUrl = res.tempFilePath;
		    	// })
            }).catch(() => {

                this.loading = false;
            });
            this.$http.get('/store/TStoreInfo/storeReport').then(async res => {
                this.shop = res;
            }).catch(() => {

            });
            
            this.getOrder(4);
			this.getType(1);
        },
        // #ifndef MP
        onNavigationBarButtonTap(e) {
            const index = e.index;
            if (index === 0) {
                this.navTo('/pages/set/set');
            } else if (index === 1) {
                // #ifdef APP-PLUS
                const pages = getCurrentPages();
                const page = pages[pages.length - 1];
                const currentWebview = page.$getAppWebview();
                currentWebview.hideTitleNViewButtonRedDot({
                    index
                });
                // #endif
                this.$mRouter.push({route: '/pages/index/notice/notice'});
            }
        },
        // #endif
        methods: {
        	getType(type){
        		this.type = type;
        		let lx = parseInt(type) - 1;
	            this.$http.get('/store/TStoreInfo/report?lx='+lx).then(async res => {
	                this.typeInfo = res;
	            }).catch(() => {

	            });
        	},
			toScan(){
				let self = this;
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						//self.$mRouter.push({route: '/pages/user/shop/order?id='+res.result});
						uni.showModal({
							content: '是否确认订单?',
							success: e => {
								if (e.confirm) {

						self.$http
							.get(`/storeComfire`, {
								writeOffCode: res.result
							})
							.then((r) => {
								self.$mHelper.toast('操作成功!');
								self.$mRouter.push({route: '/pages/user/shop/view?id='+r});
							})
							.catch(() => {

							});
							
								}
							}
						});
					}
				});
			},
        	getOrder(status){
        		if(status==6){
					this.$http
					.get(`/payStoreOrders`, {
						status: status
					})
					.then(async r => {
						this.orderList = r.list;
					})
        		}
        		else{
					this.$http
					.get(`/storeOrders`, {
						status: status
					})
					.then(async r => {
						this.orderList = r.list;
					})
				}
        	},
        	toSave(){
        		let self = this;
				uni.saveImageToPhotosAlbum({
					filePath: self.userInfo.qrcode,
					success: function () {
						console.log('save success');
						uni.showToast({
							title: '保存成功',
							duration: 2000
						});
						self.flag = false;
					}
				});
        	},
        	showCode(){
				let self = this;
				self.flag = true;
				// QRCode.toString(this.storeId, { type: 'svg' }, function(err, url) {
				// 	let str = 'data:image/svg+xml;base64,' + Buffer(url).toString('base64');
				// 	self.codeUrl = str;
				// 	self.flag = true;
				// })
        	},
        	tabClick(type){
        		this.orderType = type;
        		if(type==2){
        			this.getOrder(3);
        		}
        		else{
        			this.getOrder(4);
        		}
        	},
            // h5分享
            shareToH5() {
                // #ifdef H5
                this.$mHelper.toast('请复制连接进行分享');
                // #endif
            },
            ...mapMutations(['login']),
            // 数据初始化
            async initData() {
            	this.hasLogin = this.$mStore.getters.hasLogin;
                if (this.hasLogin) {
                    await this.getMemberInfo();
                } else {
                    this.loading = false;
                    //this.resetSectionData();
                }
            },
            // 设置购物车数量角标
            async initCartItemCount() {
							if (parseInt(uni.getStorageSync('cartNum'), 10) > 0) {
                await uni.setTabBarBadge({
                  index: this.$mConstDataConfig.cartIndex,
                  text: uni.getStorageSync('cartNum')
                });
							} else {
                uni.removeStorageSync('cartNum');
                uni.removeTabBarBadge({index: this.$mConstDataConfig.cartIndex});
							}
            },
            // 获取用户信息
            async getMemberInfo() {
                await this.$http.get(memberInfo).then(async r => {
                    this.loading = false;
                    this.userInfo = r;

                    await uni.setStorageSync('cartNum', r.cart_num);
                    // 获取足迹列表
                    await this.getFootPrintList();
                    await this.setSectionData(r);
                    await this.initCartItemCount();
                }).catch(() => {
                	//  this.hasLogin = false;
                	  this.userInfo = {};
                    this.resetSectionData();
                    this.loading = false;
                });
            },
            // 清空个人中心的各模块状态
            resetSectionData() {
                uni.removeTabBarBadge({index: this.$mConstDataConfig.cartIndex});
                this.amountList[0].value = 0;
                this.amountList[1].value = 0;
                this.amountList[2].value = 0;
                this.orderSectionList[0].num = 0;
                this.orderSectionList[1].num = 0;
                this.orderSectionList[2].num = 0;
                this.orderSectionList[3].num = 0;
                this.orderSectionList[4].num = 0;
            },
            // 给个人中心的各模块赋值
            setSectionData(data) {
                const orderSynthesizeNumArr = [];
                for (let item in data.order_synthesize_num) {
                    orderSynthesizeNumArr.push(data.order_synthesize_num[item])
                }
                for (let i = 0; i < this.orderSectionList.length; i++) {
                    this.orderSectionList[i].num = orderSynthesizeNumArr[i].toString();
                }
                this.amountList[0].value = data.account.user_money || 0;
                this.amountList[1].value = data.coupon_num || 0;
                this.amountList[2].value = data.account.user_integral || 0;
                // 更新userInfo缓存
                uni.setStorageSync('userInfo', data);
            },
            // 获取足迹列表
            async getFootPrintList() {
                await this.$http.get(`${footPrintList}`).then(r => {
                    this.footPrintList = r
                });
            },
            // 统一跳转接口,拦截未登录路由
            navTo(route) {
                if (!route) {
                    return;
                }
                if (!this.hasLogin) {
                    uni.showModal({
                        content: '你暂未登陆，是否跳转登录页面？',
                        success: (confirmRes) => {
                            if (confirmRes.confirm) {
                                this.$mRouter.push({route: '/pages/profile/profile'});
                            }
                        }
                    });
                } else {
                    this.$mRouter.push({route});
                }
            },
            /**
             *  会员卡下拉和回弹
             *  1.关闭bounce避免ios端下拉冲突
             *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
             *    transition设置0.1秒延迟，让css来过渡这段空窗期
             *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
             */
            coverTouchstart(e) {
                if (pageAtTop === false) {
                    return;
                }
                this.coverTransition = 'transform .1s linear';
                startY = e.touches[0].clientY;
            },
            coverTouchmove(e) {
                moveY = e.touches[0].clientY;
                let moveDistance = moveY - startY;
                if (moveDistance < 0) {
                    this.moving = false;
                    return;
                }
                this.moving = true;
                if (moveDistance >= 80 && moveDistance < 100) {
                    moveDistance = 80;
                }
                if (moveDistance > 0 && moveDistance <= 80) {
                    this.coverTransform = `translateY(${moveDistance}px)`;
                }
            },
            coverTouchend() {
                if (this.moving === false) {
                    return;
                }
                this.moving = false;
                this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
                this.coverTransform = 'translateY(0px)';
            }
        }
    }
</script>
<style lang='scss' scoped>
	page {
		background-color: $page-color-base;
	}

	.user {
		background: linear-gradient(0deg, #F8FCFF 0%, #F8FCFF 60%, #5667F5 100%);
		.user-section {
			padding: 20upx 30upx 0;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				filter: blur(1px);
				opacity: .7;
			}

			.user-info-box {
				height: 180upx;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
				justify-content: space-between;

				.money{
					image{ width:22rpx; height:26rpx; margin-right:10rpx;}
					font-size:24rpx; color:#fff;
				}
				.portrait-box {
					display: flex;
					align-items: center;

					.portrait {
						width: 120upx;
						height: 120upx;
						border-radius: 50%; margin-right: 20upx;
					}
					.logo{
						width:104rpx; height:29rpx; position: absolute; top:120rpx; left:8rpx; z-index:1;
						display:flex; justify-content:center; align-items:center;
						image{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:1;}
						text{ position: relative; z-index:100; color:#4351C9; text-align:center; font-size:12rpx;}
					}
					.username {
						font-size: $font-lg + 2upx; font-weight:600;
						color:#fff;
					}
					.star{
						display:flex;
						image{ width:30rpx; height:30rpx;}
					}

					button {
						background-color: transparent;
						font-size: $font-lg + 6upx;
						color: $font-color-dark;
						border: none;
					}

					button::after {
						border: none;
					}
				}
			}

			.vip-card-box {
				display: flex;
				flex-direction: column;
				color: #f7d680;
				height: 240upx;
				background: linear-gradient(to left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
				border-radius: 16upx 16upx 0 0;
				overflow: hidden;
				position: relative;
				padding: 20upx 24upx;

				.card-bg {
					position: absolute;
					top: 20upx;
					right: 0;
					width: 380upx;
					height: 260upx;
				}

				.tit {
					font-size: $font-base+2upx;
					color: #f7d680;
					margin-bottom: 28upx;

					.iconfont {
						color: #f6e5a3;
						display: inline-block;
						margin-right: 16upx;
					}
				}
			}
		}

		.cover-container {
			margin-top: 0;
			padding: 0 30upx 20upx;
			position: relative;

			.arc {
				position: absolute;
				left: 0;
				top: -34upx;
				width: 100%;
				height: 36upx;
			}

			.promotion-center {
				background: #fff;
				margin: 20upx 0;
				/*分类列表*/
				.category-list {
					width: 100%;
					padding: 0 0 30upx 0;
					border-bottom: solid 2upx #f6f6f6;
					display: flex;
					flex-wrap: wrap;

					.category {
						width: 33.3%;
						margin-top: 50upx;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						.img {
							width: 100%;
							display: flex;
							justify-content: center;

							.iconfont {
								font-size: $font-lg + 24upx;
							}
						}

						.text {
							width: 100%;
							display: flex;
							justify-content: center;
							font-size: 24upx;
							color: #3c3c3c;
						}

						.share-btn {
							height: 142upx;
							text-align: left;
							background: none;
							padding: 0;
							margin: 0;
						}

						.share-btn:after {
							border: none;
							border-radius: none;
						}
					}
				}
			}

			.tj-sction {
				@extend %section;
				display: flex;

				.tj-item {
					@extend %flex-center;
					flex: 1;
					flex-direction: column;
					margin: 30upx 0;
					font-size: $font-sm;
					color: #75787d;
					/*border-right: 2upx solid rgba(0, 0, 0, 0.2);*/
				}

				/*.tj-item:last-child {*/
				/*border-right: none;*/
				/*}*/
				.num {
					font-size: $font-base;
					color: $font-color-dark;
				}

				.red {
					color: $base-color;
				}
			}

			.order-section {
				@extend %section;
				padding: 28upx 0;

				.order-item {
					@extend %flex-center;
					width: 120upx;
					height: 120upx;
					border-radius: 10upx;
					font-size: $font-sm;
					color: $font-color-dark;
					position: relative;
				}

				.badge {
					position: absolute;
					top: 0;
					right: 4upx;
				}

				.iconfont {
					font-size: 48upx;
					color: #fa436a;
				}

				.icon-shouhoutuikuan {
					font-size: 44upx;
				}
			}

			.history-section {
				background: #fff;
				border-radius: 10upx;
				.sec-header {
					display: flex;
					align-items: center;
					font-size: $font-base;
					color: $font-color-dark;
					.iconfont {
						color: #5eba8f;
						margin-right: 16upx;
						line-height: 40upx;
					}
					.content {
						flex: 1;
					}
					.iconyou {
						font-size: $font-base + 2upx;
						color: $font-color-base;
						margin-left: $uni-spacing-row-sm;
					}
				}
				.h-list {
					padding: 20upx 30upx 0;
					.h-item {
						font-size: $font-sm; border-bottom:1px solid #eee;
						color: $font-color-base;
						border-radius: 10upx;
						.h-item-img {
							width: 160upx;
							height: 160upx;
						}
						.info-box{
							width: 450rpx;
							.name{
								font-size:28rpx;
							}
							.info{
								font-size:24rpx; color:#999;
							}
						}
						.h-item-text {
							font-size: $font-sm;
						}
					}
				}

				.no-foot-print {
					text-align: center;
					padding: 48upx 0;

					.no-foot-print-icon {
						color: $base-color;
						font-size: $font-lg + 2upx;
						margin-right: 10upx;
					}
				}

				.share-btn {
					height: 102upx;
					text-align: left;
					background: none;
					padding: 0;
					margin: 0;
				}

				.share-btn:after {
					border: none;
					border-radius: none;
				}
			}
		}
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		justify-content: space-around;
		display: flex;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.img-box{
		width:100%; height:100%; position:fixed; top:0; left:0; z-index:900;
		background:rgba(0,0,0,0.6);
	}

	.headers{
		display:flex; justify-content:center; align-items:center; height:88rpx; font-size:29rpx; font-weight:600; color:#fff;
	}

	.nums{
		display:flex;
		width: 677rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 15rpx 0rpx rgba(0,0,0,0.06);
		border-radius: 13rpx;
		flex-wrap:wrap; padding:28rpx 22rpx 0; margin:0 auto;
		.num-li{
			width:194rpx; height:130rpx; margin: 0 8rpx 20rpx 8rpx; position:relative;
			image{ width:194rpx; height:130rpx; position:absolute; top:0; left:0; z-index:1;}
			text{ position: relative; z-index:100; display:block; margin:30rpx 0 0 20rpx; font-size:22rpx; color:#fff; opacity:0.5;}
			.num{
				margin: 0 0 0 20rpx; font-size:32rpx; opacity:1;
			}
		}
	}
	.sizes{
		width: 677rpx;
		padding-bottom:40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 15rpx 0rpx rgba(0,0,0,0.06);
		border-radius: 13rpx; margin:30rpx auto 0;
		.size-tit{
			display:flex; align-items:center; height: 68rpx; font-size:22rpx; color:#303442;
			padding: 0 28rpx;
		}
		.size-ul{
			display:flex; justify-content:center;
			.size-li{
				width:25%; display:flex; justify-content:center; align-items:center; flex-direction:column;
				font-size:20rpx; color:#7D838B; line-height:200%;
				.num{ font-size:36rpx; color:#6B759E; font-weight:600;}
				.bot{
					display:flex; justify-content:center; align-items:center;
					font-size:21rpx; color: #5667F5;
					image{ width: 20rpx; height:20rpx; margin-left:8rpx;}
				}
			}
		}
		.types{
			display:flex; justify-content:center; align-items:center;
			margin-bottom:30rpx;
			text{
				width: 120rpx; display:flex; justify-content:center; align-items:center;
				height: 50rpx;
				border: 1px solid #D5DEFF;
				background: linear-gradient(0deg, #F7FBFE 0%, #FAFDFF 100%);
				font-size:22rpx; color:#7D838B;		
			}
			.cur{
				background: linear-gradient(0deg, #5668F5 0%, #7A89FF 100%);
				font-weight:600; color:#fff;
			}
			.t1{ border-radius: 50rpx 0 0 50rpx;}
			.t4{ border-radius: 0 50rpx 50rpx 0;}
		}
	}
	.navs{
		display:flex; justify-content:center; align-items:center; margin-top:32rpx; padding-bottom:55rpx;
		.nav-li{
			width:130rpx;
			display:flex; justify-content:center; align-items:center; flex-direction:column;
			font-size: 22rpx; color:#7D838B;
			image{ width:100rpx; height:89rpx; margin-bottom:16rpx;}
		}
	}
</style>
